﻿var contents =
{
/*成员*/
    callback: null,     //点击色系回调函数
/*常量*/
    Tag_Categories: "categories",
    Tag_Serieses: "serieses",
    Tag_Colors: "colors",
    Tag_Name: "name",
    Tag_R: "r",
    Tag_G: "g",
    Tag_B: "b",
    Url_ContentsJSON:"data/Contents.json",
    FileName_Back: "Back.png",
    FileName_BackHover: "BackHover.png",
    String_LevelStart:"色表",
    String_LevelStartAnd: "色表 - ",
/*变量*/
    table: null,
    list: null,
    back: null,
    level: null,

/*接口*/
    /**
      * 初始化
      * @param {function} callback 回调函数，function(colors)
    */
    initial: function (callback)
    {
        this.callback = callback;
        this.table = document.getElementById("contents_table");
        this.list = document.getElementById("contents_list");
        this.back = document.getElementById("contents_back");
        this.level = document.getElementById("contents_level");

        var that = this;

        var xmlHttp = new XMLHttpRequest();       //创建对象
        xmlHttp.onreadystatechange = function ()       //注册回调函数
        {
            if (this.readyState == 4 && this.status == 200)
            {
                var json = JSON.parse(this.responseText);

                var categories = json[that.Tag_Categories];
                for (var i = 0, length = categories.length; i < length; i++)
                {
                    var div = document.createElement("div");                   
                    div.className = "Contents_Row";
                    div.json = categories[i];
                    var name = categories[i][that.Tag_Name];
                    div.name = name;
                    var nameDiv = document.createElement("div");
                    nameDiv.innerHTML = name;
                    div.appendChild(nameDiv);
                    var serieses = categories[i][that.Tag_Serieses];        //创建预览
                    for (var j = 0; j < serieses.length && j < 5; j++)
                    {
                        var preview = that.createColorPreviewBox(serieses[j]);
                        div.appendChild(preview);
                    }
                   
                    that.list.appendChild(div);

                    div.that = that;
                    div.onclick = that.row_handlerClick;
                }
            }            
        };
        xmlHttp.open("GET", this.Url_ContentsJSON, true);
        xmlHttp.send(null);

        this.back.onclick = function ()
        {
            that.list.style.left = 0;
            this.style.display = "none";
            that.level.innerHTML = that.String_LevelStart;
        };
        this.back.onmouseenter = function ()
        {
            this.src = Path_Icon + that.FileName_BackHover;
        };
        this.back.onmouseleave = function ()
        {
            this.src = Path_Icon + that.FileName_Back;
        };
    },

/*内部*/
    /**
    * 事件处理：Row点击
    */
    row_handlerClick: function ()
    {
        var serieses = this.json[this.that.Tag_Serieses];
        this.that.table.innerHTML = "";
        for (var i = 0, length = serieses.length; i < length; i++)
        {
            var div = document.createElement("div");
            div.className = "Contents_Block";
            div.json = serieses[i];
            var seriesName = serieses[i][this.that.Tag_Name];
            div.title = seriesName;
            var icon = this.that.createColorPreviewBox(serieses[i]);
            div.appendChild(icon);
            var name = document.createElement("div");
            name.innerHTML = seriesName;
            div.appendChild(name);

            this.that.table.appendChild(div);

            div.that = this.that;
            div.onclick = this.that.block_handlerClick;
        }

        this.that.list.style.left = "-100%";
        this.that.back.style.display = "block";
        this.that.level.innerHTML = this.that.String_LevelStartAnd + this.name;
    },
    /**
      * 事件处理：Block点击
    */
    block_handlerClick:function()
    {
        var colors = this.json[this.that.Tag_Colors];

        this.that.callback(colors);
    },
    /**
     * 创建颜色预览盒子
    */
    createColorPreviewBox:function(series)
    {
        var colors = series[this.Tag_Colors];

        var container = document.createElement("div");
        container.className = "Contents_ColorPreviewBox";

        for (var i = 0; i < colors.length && i < 4; i++)
        {
            var div = document.createElement("div");
            div.className = "Contents_ColorPreviewBox_Color";
            div.style.background = "rgb(" + colors[i][this.Tag_R] + "," + colors[i][this.Tag_G] + "," + colors[i][this.Tag_B] + ")";
            container.appendChild(div);
        }

        return container;
    }
};